import React, { useContext } from 'react';
import { Form, Collapse } from 'antd';
import Cls from 'classnames';

import '../common/updateStyle.less';
import { ExpertsUpdateContext } from '../common/ExpertsContext';
import { IActionEnum } from '../common/ExpertsReducer';

import pageStyles from '@/common/pageLayout.less';
import { CaretRightOutlined } from '@ant-design/icons';

const UpdateExpertsForm: React.FC<ExpertsUpdateAPI.IUpdateExpertsForm> = ({
  children,
  isView,
  form,
}) => {
  const { prefixCls, activeKey, dispatch } = useContext(ExpertsUpdateContext);

  /**
   * @onChangeActivekey
   * @description 合同信息折叠面板操作
   * @param keys 面板的 keys
   */
  const onChangeActivekey = (keys: string | string[]) => {
    dispatch({
      type: IActionEnum.UPDATE_ACTIVE_KEY,
      payload: Array.isArray(keys) ? keys : [keys],
    });
  };

  return (
    <Form form={form} name="basic" autoComplete="off">
      <Collapse
        className={Cls(isView ? pageStyles['commonCollapse'] : `${prefixCls}updateCollapse`)}
        activeKey={activeKey}
        bordered={false}
        onChange={onChangeActivekey}
        expandIcon={({ isActive }) => {
          return <CaretRightOutlined rotate={isActive ? 90 : 0} />;
        }}
        expandIconPosition="end"
      >
        {children}
      </Collapse>
    </Form>
  );
};

export default UpdateExpertsForm;
